<template>
    <div>
        <!-- 头部区域 start -->
        <my-header :ref="refName" title="商品详情" :clickLeft="onClickLeft" :clickRight="onClickRight">
            <!-- 左侧按钮插槽 -->
            <template #left>
                <i class="gray-icon"/>
            </template>
            <!-- 右侧按钮插槽 -->
            <template #right>
                <i class="more-icon"/>
            </template>
        </my-header>
        <!-- 头部区域 start -->

        <!-- 商品信息展示区域 start -->
        <div class="good-info">
            <!-- 轮播图 start -->
            <good-swiper :swiperImages="swiperImages" :onChange="onChange">
                <!-- 自定义指示器 -->
                <template #indicator>
                    <div class="custom-indicator">
                        <span :class="['indicator-item', {'active': (index - 1) === current}]" v-for="index in swiperImages.length" :key="index"></span>
                    </div>
                </template>
            </good-swiper>
            <!-- 轮播图 end -->

            <!-- 商品名称 + 价格 -->
            <good-desc :title="goodItem.title" :nowPrice="goodItem.nowPrice" :originPrice="goodItem.originPrice"/>
        </div>
        <!-- 商品信息展示区域 end -->

        <!-- 分隔层 -->
        <div class="good-divider"></div>

        <!-- 商品图文详情区域 start -->
        <good-introduction :goodIntroductionImages="goodIntroductionImages"/>
        <!-- 商品图文详情区域 end -->

        <!-- 商品导航 start -->
        <van-goods-action class="good-action">
            <van-goods-action-icon icon="/static/images/good/chat-icon.png" text="客服" />
            <van-goods-action-icon icon="/static/images/good/heart-icon.png" text="收藏" />
            <van-goods-action-icon icon="/static/images/good/cart-icon.png" to="/shoppingCart" text="购物车" />
            <van-goods-action-button class="good-action-btn" color="#302F42" type="warning" text="加入购物车" @click="show = true" />
            <van-goods-action-button class="good-action-btn" color="#D93E2E" type="danger" text="立即购买" @click="hanlderBuy" />
        </van-goods-action>
        <!-- 商品导航 end -->

        <!-- 商品规格 start -->
        <!--<van-sku-->
        <!--    v-model="show"-->
        <!--    :sku="sku"-->
        <!--    :goods="goods"-->
        <!--    :goods-id="goodsId"-->
        <!--    :quota="quota"-->
        <!--    :quota-used="quotaUsed"-->
        <!--    :hide-stock="sku.hide_stock"-->
        <!--    :message-config="messageConfig"-->
        <!--    @buy-clicked="onBuyClicked"-->
        <!--    @add-cart="onAddCartClicked"-->
        <!--/>-->
        <!-- 商品规格 end -->

        <!-- 回到顶部 -->
        <div>
            <Backtotop> </Backtotop>
        </div>
    </div>
</template>

<script>
    // 引入头部组件
    import myHeader from "../../components/myHeader/myHeader";
    // 引入轮播图组件
    import goodSwiper from "./goodSwiper";
    // 引入商品信息组件
    import goodDesc from "./goodDesc";
    // 引入商品详情组件
    import goodIntroduction from "./goodIntroduction";
    // 回到顶部
    import Backtotop from "@/components/home/Backtotop";
    // 引入商品详情模块接口
    import {getGoodSwiper, getGoodDesc, getGoodIntroduction} from "../../request/goodApi";
    import {Toast} from "vant";

    export default {
        data() {
            return {
                refName: 'myHeader',
                swiperImages: [],
                goodItem: {},
                goodIntroductionImages: [],
                current: 0,
                // show: false,
                // sku: {
                //     // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                //     // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                //     tree: [
                //         {
                //             k: '颜色', // skuKeyName：规格类目名称
                //             k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                //             v: [
                //                 {
                //                     id: '1', // skuValueId：规格值 id
                //                     name: '红色', // skuValueName：规格值名称
                //                     imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                //                     previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
                //                 },
                //                 {
                //                     id: '1',
                //                     name: '蓝色',
                //                     imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                //                     previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
                //                 }
                //             ],
                //             largeImageMode: true, //  是否展示大图模式
                //         }
                //     ],
                //     // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                //     list: [
                //         {
                //             id: 2259, // skuId
                //             s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                //             s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                //             price: 100, // 价格（单位分）
                //             stock_num: 110 // 当前 sku 组合对应的库存
                //         }
                //     ],
                //     price: '1.00', // 默认价格（单位元）
                //     stock_num: 227, // 商品总库存
                //     collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                //     none_sku: false, // 是否无规格商品
                //     messages: [
                //         {
                //             // 商品留言
                //             datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                //             multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                //             name: '留言', // 留言名称
                //             type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                //             required: '1', // 是否必填 '1' 表示必填
                //             placeholder: '' // 可选值，占位文本
                //         }
                //     ],
                //     hide_stock: false // 是否隐藏剩余库存
                // },
                // goods: {
                //     // 默认商品 sku 缩略图
                //     picture: 'https://img01.yzcdn.cn/1.jpg'
                // },
                // messageConfig: {
                //     // 数据结构见下方文档
                // },
            }
        },
        methods: {
            // 需要传递给头部组件的左侧按钮事件
            onClickLeft() {
                // 返回上一页
                this.$router.go(-1);
            },
            // 点击右侧按钮触发头部组件事件
            onClickRight() {
                console.log('点击右侧...此处可写你要传递的方法（例如路由跳转）');
            },
            onChange(index) {
                this.current = index;
            },
            // 跳转到订单确认页面
            hanlderBuy() {
                if(localStorage.getItem("telPhone")){
                    this.$router.push({name:'orderComfirm', params:{index:4}}).catch(err=>{});
                }else{
                    Toast('请先登录');
                    this.$router.push({path:"login"}).catch(err=>{});
                    console.log("登录页");
                }
            }
        },
        mounted() {
            // 获取商品轮播图
            getGoodSwiper().then(res => {
                this.swiperImages = res;
            });
            // 获取商品名称 + 价格
            getGoodDesc().then(res => {
                this.goodItem = res;
            });
            // 获取商品详情图
            getGoodIntroduction().then(res => {
                this.goodIntroductionImages = res;
            });
        },
        components: {myHeader, goodSwiper, goodDesc, goodIntroduction, Backtotop}
    }
</script>

<style lang="less" scoped>
    // 头部区域
    .header {
        background-color: #fff;
        // 返回图标
        .gray-icon {
            display: block;
            background: url("../../../static/images/myHeader/back-gray.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
        // 更多图标
        .more-icon {
            display: block;
            background: url("../../../static/images/myHeader/more.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 12px;
        }
        /* 导航栏区域 */
        /deep/ .van-nav-bar {
            /* 标题 */
            .van-nav-bar__title {
                color: #232323;
            }
        }
    }

    /* 商品信息展示区域 */
    .good-info {
        width: 700px;
        height: 916px;
        margin: 0 auto;
        // 自定义轮播图指示器区域
        /deep/.custom-indicator {
            margin: 0 auto;
            width: 575px;
            height: 30px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            /* 轮播图指示器 */
            .indicator-item {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: url("../../../static/images/good/swiper-normal-indicator.png") no-repeat 0 0;
                background-size: contain;
                // 当前轮播图指示器
                &.active {
                    background: url("../../../static/images/good/swiper-active-indicator.png") no-repeat 0 0;
                    background-size: contain;
                }
            }
        }
    }

    /* 分隔层 */
    .good-divider {
        width: 750px;
        height: 33px;
        background: #F6F6F6;
    }

    /* 商品导航 */
    .good-action {
        border-top: 1px solid lightgray;
        /* 图标 */
        .van-goods-action-icon {
            font-size: 22px;
            font-weight: 500;
            color: #3D3D3D;
        }
        /* 按钮 */
        .good-action-btn {
            border-radius: 0;
            height: 100%;
            margin: 0;
        }
    }
</style>
